<template>
	<div class="login-bg">
		<div class="bg-img" ref="bgImgEl"></div>
		<div class="login-container">
			<div class="login-form">
				<el-form :model="form" :rules="formRules" ref="ruleForm"  class="form-box" @key.enter.native="onSubmit">
					<div class="title">vue3.0 后台管理系统</div>
					<el-form-item  prop="username">
						<el-input size="large" prefix-icon="el-icon-user" v-model="form.username"></el-input>
					</el-form-item>
					<el-form-item  prop="password">
						<el-input size="large" prefix-icon="el-icon-lock" v-model="form.password" show-password></el-input>
					</el-form-item>
					<el-form-item>
						<el-button size="large" style="width:100%" type="primary" html-type="submit" :loading="loading" @click="onSubmit">登录</el-button>
					</el-form-item>
					<el-form-item>
						<el-checkbox v-model="form.remember" @change="onRemember">7天内免登陆</el-checkbox>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import { onMounted, reactive , ref, toRefs } from 'vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import {setToken} from '@/utils/token'
export default {
	setup(){
		let bgImgEl=ref(null)
		let ruleForm=ref(null)

		let state=reactive({
			form:{
				username:'',
				password:'',
				remember:false,
			},
			formRules:{
				username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
			},
			loading:false
		})

		let store = useStore()
		let router = useRouter()

		function onRemember(e){
			state.form.remember=e.target.checked
		}

		function onSubmit(e){
			//模拟登录 根据具体项目修改
			ruleForm.value.validate((valid) => {
				console.log(state.form);
				if (valid) {
					state.loading=true
					setTimeout(() => {
						state.loading=false
						setToken({
							token:'123',
							remember:state.form.remember
						})
						store.commit('setUser',{
							userType:1,
							access:[]
						})
						router.replace('/')
					}, 2000);
				} else {
					console.log('error submit!!');
					return false;
				}
			});

		}

		onMounted(()=>{
			bgImgEl.value.addEventListener("animationend", ()=>{
				console.log('end');
			});
		})

		return {
			...toRefs(state),
			onRemember,
			onSubmit,
			bgImgEl,
			ruleForm
		}
	},
}
</script>

<style lang="scss" scoped>
@import '@/styles/theme.scss';
.login-bg{
	height: 100vh;
	width: 100vw;
	position: relative;
	overflow: hidden;
	.bg-img{
		display: block;
		position: absolute;
		z-index: 0;
		left: 0;
		top: 0;
		width: 150%;
		height: 150%;
		background: url(../../assets/login-bg.jpg) no-repeat;
		background-size: cover;
		filter: brightness(70%);
		animation: move linear 100s infinite alternate;
	}
	.login-container{
		position: relative;
		z-index: 1;
		color:#fff;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		.login-form{
			width: 400px;
			background: #fff;
			border-radius: 12px;
			padding: 20px 40px;
			.form-box{
				width: 100%;
				&::v-deep .ant-form-item-control-wrapper{
					width: 100%;
				}
			}
			.title{
				font-size: 22px;
				text-align: center;
				margin: 20px auto 30px auto;
				color:$theme-color;
				text-shadow: 0 4px 6px rgba($color: $theme-color, $alpha: 0.2);
			}
		}
	}

}
@keyframes move {
	0%{
		left: 0;
		top:0;
		opacity: 1;
		filter: brightness(70%);
		background: url(../../assets/login-bg.jpg) no-repeat;
		background-size: cover;
	}
	25%{
		left: -50%;
		top: 0;
	}
	50%{
		left: -50%;
		top:-50%;
	}
	75%{
		left: 0;
		top:-50%;
	}
	100%{
		left: 0;
		top:0;
		background: url(../../assets/login-bg2.jpg) no-repeat;
		background-size: cover;
	}
}
</style>
